<template>
  <basic-drawer
    :visible="visible"
    title="功能说明"
    :width="800"
    :footer="false"
    @close="handleClose"
    @cancel="handleClose">
    <div class="function-desc">
      <span>
        为保护您的站点资源不被非法站点下载盗用，您可按需选择四种鉴权方式的某一种，本文为您详细介绍各个模式的各个参数字段和原理。
      </span>
      <section class="flex flex-col">
        <span class="weight-title">鉴权字段说明：</span>
        <span class="sub-title mt-2 mb-1">使用以下字段示例介绍鉴权模式</span>
        <div class="table">
          <div
            class="table-item"
            v-for="item in fieldOptions"
            :key="item.value">
            <span class="label">{{ item.label }}</span>
            <span class="value" v-html="item.value"></span>
          </div>
        </div>
      </section>
      <section class="flex flex-col">
        <span class="weight-title">缓存策略</span>
        <span class="sub-title mt-2 mb-1"
          >节点进行资源缓存时，自动忽略对应的鉴权参数进行缓存。</span
        >
      </section>
      <section class="flex flex-col">
        <span class="weight-title">回源策略</span>
        <span class="sub-title mt-2 mb-1"
          >鉴权通过后，如果未命中 CDN
          节点，节点会发起回源请求，回源请求会去除鉴权参数。</span
        >
      </section>
      <a-radio-group type="button" v-model="mode" class="w-fit">
        <a-radio
          v-for="item in modeOptions"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}</a-radio
        >
      </a-radio-group>
      <div class="text-4">
        访问 URL 格式：<span class="text-1">{{ urls[mode - 1] }}</span>
      </div>
      <section>
        <span class="sub-title">示例配置如下</span>
        <div class="table mt-1">
          <div
            class="table-item"
            v-for="item in configOptions"
            :key="item.value"
            v-show="item.show.includes(mode)">
            <span class="label">{{ item.label }}</span>
            <span class="value" v-html="item.value"></span>
          </div>
        </div>
      </section>
      <section
        v-for="(item, index) in md5UrlDescData"
        :key="index"
        v-show="mode === index + 1"
        class="flex flex-col gap-y-6">
        <div class="common-content">
          <span class="weight-title">md5 计算规则</span>
          <div class="content">
            {{ item.md5 }}
          </div>
        </div>
        <div class="common-content">
          <span class="weight-title">生成鉴权 URL</span>
          <div class="content">
            {{ item.url }}
          </div>
        </div>
        <div class="common-content">
          <span class="weight-title">鉴权逻辑说明</span>
          <div class="content">
            {{ item.desc }}
          </div>
        </div>
      </section>
    </div>
  </basic-drawer>
</template>
<script lang="ts" setup>
import { modeOptions } from '../state'
const mode = ref(1)
const visible = defineModel<boolean>('visible', { default: false })
const handleClose = () => (visible.value = false)
const urls = ref([
  'http://DomainName/Filename?sign=timestamp-rand-md5hash',
  'http://DomainName/timestamp/md5hash/Filename',
  'http://DomainName/md5hash/timestamp/Filename',
  'http://DomainName/Filename?sign=md5hash&time=timestamp'
])
const fieldOptions = [
  {
    label: '原始 URL',
    value:
      '未添加鉴权参数的原始 URL，示例为：http://www.example.com/example.jpg'
  },
  {
    label: 'DomainName',
    value: 'CDN 域名，示例为：www.example.com'
  },
  {
    label: 'Filename',
    value:
      '资源访问路径，鉴权时 Filename 需以正斜线（ / ）开头，示例为：/example.jpg'
  },
  {
    label: 'timestamp',
    value: `
      服务端生成鉴权 URL 的时间，使用十进制整型正数的 Unix 时间戳，示例为：2020年02月27日16:10:32（UTC+8），转换为十进制的整形数值为1582791032(timestamp)，转换为十六进制的整形数值为5e577978(timestamp)，不同模式使用的格式不同</br>
      模式一：使用十进制整型正数的 Unix 时间戳</br>
      模式二：使用十进制（YYYYMMDDHHMM）格式</br>
      模式三：使用十六进制（Unix 时间戳）</br>
      模式四：可选十或十六进制（Unix 时间戳）
    `
  },
  {
    label: 'rand',
    value:
      '随机字符串，0 - 100位随机字符串，由大小写字母与数字组成。示例为：bexTIBz4n6xwKeavmnHyBE2VBbvzrL'
  },
  {
    label: 'peky',
    value:
      '自定义密钥：由6 - 128位大小写字母、数字构成，示例为：AUzTvavi33zKjw6Bn7hXk'
  },
  {
    label: 'uri',
    value: '资源访问路径以正斜线（ / ）开头，示例为：/example.jpg'
  },
  {
    label: 'md5hash',
    value: `
      通过 MD5 算法计算出的固定长度为32位的字符串，每种模式 md5hash 计算方式不同</br>
      模式一：md5sum(uri-timestamp-rand-pkey)</br>
      模式二：md5sum(pkeytimestampuri)</br>
      模式三：md5sum(pkeyuritimestamp)</br>
      模式四：md5sum(pkeyuritimestamp)
    `
  }
]
const configOptions = computed(() => {
  return [
    {
      label: '鉴权密钥',
      value: 'AUzTvavi33zKjw6Bn7hXk',
      show: [1, 2, 3, 4]
    },
    {
      label: '签名参数',
      value: 'sign',
      show: [1, 4]
    },
    {
      label: '有效时间',
      value: '100s',
      show: [1, 2, 3, 4]
    },
    {
      label: '时间戳参数名',
      value: 'time',
      show: [4]
    },
    {
      label: '时间格式',
      value: '十进制（Unix 时间戳）',
      show: [4]
    },
    {
      label: '鉴权范围',
      value: '所有文件',
      show: [1, 2, 3, 4]
    }
  ]
})
const md5UrlDescData = ref([
  {
    md5: 'md5hash=md5sum(uri-timestamp-rand-pkey)=md5sum(/example.jpg-1582791032-bexTIBz4n6xwKeavmnHyBE2VBbvzrL-AUzTvavi33zKjw6Bn7hXk)=7622a3ef7af0bea53b1d33d0de025ea4',
    url: 'http://www.example.com/example.jpg?sign=1582791032-bexTIBz4n6xwKeavmnHyBE2VBbvzrL-7622a3ef7af0bea53b1d33d0de025ea4',
    desc: '当客户端通过加密 URL 进行访问时，如果 CDN 服务器计算出来的 md5hash 值与访问请求中带的 md5hash 值相同，都为：7622a3ef7af0bea53b1d33d0de025ea4，则鉴权通过，反之鉴权失败，返回错误码 403。'
  },
  {
    md5: 'md5hash=md5sum(pkeytimestampuri)=md5sum(AUzTvavi33zKjw6Bn7hXk202002271610/example.jpg)=a22e99efcbe816208b2d7d6c4236b44e',
    url: 'http://www.example.com/202002271610/a22e99efcbe816208b2d7d6c4236b44e/example.jpg',
    desc: '当客户端通过加密 URL 进行访问时，如果 CDN 服务器计算出来的 md5hash 值与访问请求中带的 md5hash 值相同，都为：a22e99efcbe816208b2d7d6c4236b44e，则鉴权通过，反之鉴权失败，返回错误码 403。'
  },
  {
    md5: 'md5hash=md5sum(pkeyuritimestamp)=md5sum(AUzTvavi33zKjw6Bn7hXkexample.jpg5e577978)=0fa9ad3e92b381941ca3a12c5b918a1a',
    url: 'http://www.example.com/0fa9ad3e92b381941ca3a12c5b918a1a/5e577978/example.jpg',
    desc: '当客户端通过加密 URL 进行访问时，如果 CDN 服务器计算出来的 md5hash 值与访问请求中带的 md5hash 值相同，都为：0fa9ad3e92b381941ca3a12c5b918a1a，则鉴权通过，反之鉴权失败，返回错误码 403。'
  },
  {
    md5: 'md5hash=md5sum(pkeyuritimestamp)=md5sum(AUzTvavi33zKjw6Bn7hXk/example.jpg1582791032)=d16990ff0fd402525107e4412e11b640',
    url: 'http://www.example.com//example.jpg?sign=d16990ff0fd402525107e4412e11b640&time=1582791032',
    desc: '当客户端通过加密 URL 进行访问时，如果 CDN 服务器计算出来的 md5hash 值与访问请求中带的 md5hash 值相同，都为：d16990ff0fd402525107e4412e11b640，则鉴权通过，反之鉴权失败，返回错误码 403。'
  }
])
</script>

<style lang="less" scoped>
.function-desc {
  @apply text-sm/22px text-2 flex flex-col gap-y-6;
  .weight-title {
    @apply text-sm/22px font-700 text-1;
  }
  .sub-title {
    @apply text-sm/22px text-4;
  }
  .table {
    @apply w-full border border-solid border-color-[#EEEFF2] rounded-2 overflow-hidden;
    &-item {
      @apply flex;
      &:not(:last-child) {
        border-bottom: 1px solid #eeeff2;
      }
      .label {
        @apply w-125px py-9px px-4 text-sm/22px text-4 bg-#F7F8FA;
        border-right: 1px solid #eeeff2;
      }
      .value {
        @apply py-9px px-4 text-sm/22px text-2 flex-1  break-all;
      }
    }
  }
  .common-content {
    @apply w-full min-h-52px pl-4 flex flex-col gap-y-2 relative;
    &::before {
      @apply w-1 h-full bg-[#D1E7FF] absolute content-empty left-0;
    }
    .content {
      @apply text-sm/22px text-3  break-all;
    }
  }
}
</style>
